import React from 'react'
import ReactDOM from 'react-dom'
import './css/List.css'
import man from './assets/List/right.png'


class List extends React.Component {
  constructor (props) {
    super(props)
    this.state = { 
    }
  }
  theme = 'default';
  
  componentWillMount = () => {  
        if(this.props.listConfig !== undefined) this.config = Object.assign(this.config,this.props.listConfig);
        this.data =this.props.listData;
      // this.proData(this.data)
  } 
  componentDidMount = () => {
   
  }
   componentWillReceiveProps = (nextProps) => {   
        this.data =nextProps.listData;
        this.config =nextProps.listConfig; 
        console.log(this.data)
  }
 
 
    config = {
        width:  350,         
        theme:'default',  
        // leftIcon:{//左边统一图标
        //     img:man,
        //     itemStyle:{
        //         width:45,height:45
        //     },
        //     itemClick:()=>{

        //     } 
        // }, 
        dataConfig:[ {
                key:'title', 
                itemStyle:{ width: '100%' },
                itemClick: (e,item) => {
                    console.log(e,item)
                }
            },{
                key:'time',
                itemStyle:{width:'110px',   position: 'absolute',right:0,top:0}                
            },{
                key:'responName',
                typr:'img',
                itemStyle:{  display: 'inline-block'}                
            },{
                key:'responC',              
                  download:true,  //a链接下载
                itemStyle:{  display: 'inline-block'}                
            }
        ]
    }
    itemClictFn = (e,data) => {//默认点击事件
        console.log(data)
    }
    data=[ ]
    info={
        popupshow:'none',
        chatImgPath:'',
    }
    popupFn = (path)=>{
        this.info.chatImgPath = path;
        this.info.popupshow='block'; 
         this.setState({})
    }
    closePopup=()=>{
        this.info.popupshow='none' ;
         this.setState({})
    }
    proData =(data)=>{ 
       let leftIcon = (this.config.leftIcon == null) ?  '':  
       <div style={this.config.leftIcon.itemStyle}onClick={this.config.leftIcon.itemClick} >
           <img src={this.config.leftIcon.img} alt="" />
       </div>  
        return(
            <div className= 'listWrap'>
                {
                    data.map((item,i)=>{ 
                      return (
                          <div className="item" >
                              { leftIcon } 
                              <div style={{width:this.config.leftIcon == null?'100%':this.config.width-this.config.leftIcon.itemStyle.width}}>
                                {
                                    this.config.dataConfig.map((jtem,j)=>{
                                       if(jtem.type=='download'){ //是否下载
                                            let filetype=item.filetype;  
                                            if(filetype=='.png' ||filetype=='.PNG'||filetype=='.GIF'||filetype=='.gif'){//图片的点击弹窗显示
                                                return ( 
                                                        <a href='#' style={jtem.itemStyle}  onClick={()=>this.popupFn(item[jtem.key].href)} >
                                                          {item[jtem.key].name} 
                                                        </a>
                                                ) 
                                            }else{//不是图片类型的点击下载
                                                return ( 
                                                    <a href='#' style={jtem.itemStyle} download ={item[jtem.key].href}  >
                                                         {item[jtem.key].name} 
                                                    </a>
                                                ) 
                                            } 
                                       }else{
                                            let showarea = jtem.type=='img'?  <img src= {item[jtem.key]} / >:item[jtem.key]; 
                                            if(jtem.itemClick){
                                                    return (
                                                    <div style={jtem.itemStyle} onClick={()=>jtem.itemClick(event,item)}>
                                                        {showarea}
                                                    </div>
                                                ) 
                                            }else { return (
                                                    <div style={jtem.itemStyle} onClick={()=>this.itemClictFn(event,item)}>
                                                        {showarea}
                                                    </div>
                                                ) 
                                            }
                                        } 
                                    })
                                }
                              </div>
                           
                          </div>
                      )
                    })
                }
            </div>
        ) 
        
    }

  render () {   
    return ( 
      <div className = {'List ' + this.theme}>
        {this.proData(this.data)}
        <div className='popup' style={{display:this.info.popupshow}}>
                <div className='content'>
                    <div className="ret" onClick={()=>this.closePopup()} style={{textAlign: 'right'}}><label className="lab" >返回</label></div>   
                    <img src={"/"+this.info.chatImgPath} alt=""/>
                </div>
            </div>
      </div>
    )
  }
}

export default List